<template>
  <div class="purchase-list-layout">
    <ul class="common-list-nav clearfix">
      <li class="nav-item" v-for="(item,index) in list">
        {{item.txt}}
        <span>></span>
      </li>
    </ul>
    <div class="set-admin-table">
      <div class="purchase-item">
        <el-form ref="searchData" :model="searchData" class="clearfix">
          <el-form-item>
            <el-select v-model="searchData.cityName" placeholder="城市">
              <el-option label="华捷" value="shanghai"></el-option>
              <el-option label="华捷2" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchData.manufacturer " placeholder="厂商">
              <el-option label="华捷" value="shanghai"></el-option>
              <el-option label="华捷2" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="itemButton">
            <el-button type="primary" @click="submitSearch('searchData')">查询</el-button>
            <el-button type="primary" @click="resetItem('searchData')">重置</el-button>
            <el-button type="primary" class="addItem" @click="addList">导出</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="purchase-table-list">
        <el-table :data="tableData" border>
          <el-table-column :label="item.label" v-for="(item,index) in tableItem" :key="index"
                           :width="item.name==='orderNum'?64:''" v-if="item.name!=='edit'">
            <template scope="scope">
              <el-popover trigger="hover" placement="top" v-show="scope.row.edit">
                <p>{{item.label}}: {{ scope.row[item.name]}}</p>
                <div slot="reference">
                  <el-tag>{{ scope.row[item.name] }}</el-tag>
                </div>
              </el-popover>
              <el-popover trigger="hover" placement="top" v-show="!scope.row.edit">
                <p>{{item.label}}: {{ scope.row[item.name]}}</p>
                <div slot="reference">
                  <el-input v-model="scope.row[item.name]"></el-input>
                </div>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination layout="total, prev, pager, next, jumper"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage4"
                       :page-size="10"
                       :total="400">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import projectSearch from '../../common/projectSerch.vue'

  export default {
    data () {
      return {
        edit: false,
        list: [
          {
            txt: '系统管理'
          },
          {
            txt: '数据分析'
          }
        ],
        searchData: {
          cityName: '',
          manufacturer: ''
        },
        tableData: [
          {
            edit: true,
            orderNum: '1',
            cityName: '华捷',
            manufacturer: '华捷',
            repairsNum: 'pos机',
            repairsRate: '2017-08-12',
            repairsTime: 'FJZ-211EEGQ63'
          },
          {
            edit: true,
            orderNum: '1',
            cityName: '华捷',
            manufacturer: '华捷',
            repairsNum: 'pos机',
            repairsRate: '2017-08-12',
            repairsTime: 'FJZ-211EEGQ63'
          }
        ],
        tableItem: [
          {label: '编辑', name: 'edit'},
          {label: '编号', name: 'orderNum'},
          {label: '城市', name: 'cityName'},
          {label: '厂商', name: 'manufacturer'},
          {label: '报修数量', name: 'repairsNum'},
          {label: '故障率', name: 'repairsRate'},
          {label: '报修时间', name: 'repairsTime'}
        ],
        currentPage4: 4
      }
    },
    components: {projectSearch},
    methods: {
      submitSearch () {
        console.log('submit')
      },
      resetItem () {
        console.log('reset')
      },
      addList () {
        this.$router.push(`/newPurchase`)
      },
      handleEdit (index, row) {
        console.log(index, row)
      },
      handleDelete (index, row) {
        console.log(index, row)
      },
      handleSizeChange (val) {
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange (val) {
        console.log(`当前页: ${val}`)
      }
    }
  }
</script>
